import React, { useState } from 'react';
import { Code, Database, FileText } from 'lucide-react';
import DevelopmentGuide from './DevelopmentGuide';
import ESGPlatformERDiagram from '../design/模型设计.jsx';
import ESGBusinessScenarios from '../design/模型示例.jsx';

const DevelopmentHub = ({ setCurrentPage }) => {
  const [activeTab, setActiveTab] = useState('guide');

  const developmentTabs = [
    { id: 'guide', name: '技术架构', icon: Code, component: DevelopmentGuide },
    { id: 'model', name: '数据模型', icon: Database, component: ESGPlatformERDiagram },
    { id: 'scenarios', name: '业务场景', icon: FileText, component: ESGBusinessScenarios }
  ];

  const currentTab = developmentTabs.find(tab => tab.id === activeTab);
  const CurrentComponent = currentTab.component;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 二级导航栏 */}
      <div className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-14">
            <div className="flex items-center space-x-4">
              <h2 className="text-lg font-semibold text-gray-900">开发指南</h2>
              <div className="h-4 w-px bg-gray-300"></div>
              <nav className="flex space-x-1">
                {developmentTabs.map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${
                        activeTab === tab.id
                          ? 'bg-purple-100 text-purple-700 border border-purple-300'
                          : 'text-gray-600 hover:text-gray-800 hover:bg-gray-100'
                      }`}
                    >
                      <Icon className="h-4 w-4 mr-2" />
                      {tab.name}
                    </button>
                  );
                })}
              </nav>
            </div>
            
            <div className="flex items-center space-x-2">
              <span className="text-sm text-gray-500">当前模块:</span>
              <span className="px-2 py-1 bg-purple-100 text-purple-800 text-sm rounded">
                {currentTab.name}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="flex-1">
        <CurrentComponent />
      </div>
    </div>
  );
};

export default DevelopmentHub; 